<template>
  <dv-full-screen-container class="screenstyle">
    <div class="screenBox">
      <div class="screenBox_item">
        <div class="box box_center">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">数据概览</div>
          <div class="detail_card">
            <div v-for="station in stationsData" :key="station.quantity" class="card_item">
              <div class="header">
                <img :src="station.icon" width="16px" style="margin-right:4px" />
                <div style="color:white;font-weight:800;font-size:8px;height:16px;line-height:16px">{{station.name}}</div>
              </div>
              <div class="detail">
                <div style="color:white;height:44px;font-size:20px;line-height:44px;text-align:center;width:80%;font-weight:600;margin-right:-10px"> {{station.quantity}}</div>
                <div style="color:white;height:44px;font-size:12px;line-height:44px;text-align:center;width:30%;font-weight:600;">{{station.unit}}</div>
              </div>
            </div>
          </div>
          <div class="pie_chart">
            <piechart :chartdata="piedata" style="width:120%;height:280%"></piechart>
          </div>
        </div>
        <div class="box ">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">年统计</div>
          <div class="line_chart" style="width:100%;height:100%">
            <linechart :chartdata="years_data" :xAxis="{type: 'category',data:years,axisLine: {lineStyle: {color: '#fff'}}}" :grid="{bottom: 30,left: 50}"></linechart>
          </div>
        </div>
        <div class="box">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">月统计</div>
          <div class="line_chart" style="width:100%;height:100%">
            <linechart :chartdata="months_data" :xAxis="{type: 'category',data:month,axisLine: {lineStyle: {color: '#fff'}}}" :grid="{bottom: 30,left: 50}"></linechart>
          </div>
        </div>
      </div>
      <div class="screenBox_item">
        <div class="box1" @click="gotoStationsManagement">
          <img src="../../assets/background1.png" class="bgimg" />
          <div class="title1 text_center">油站统计</div>
          <div class="line_chart" style="width:100%;height:105%">
            <linechart :chartdata="stations_data" :xAxis="{ position: 'top',axisLine: {lineStyle: {color: ' #fff', }}}" :yAxis="{type: 'category',splitLine: { show: false },axisLine: {lineStyle: {color: ' #fff', } },data:stations,axisLabel:axisLabel}" :grid="{top: 100,left: 110}"></linechart>
          </div>
        </div>
        <div class="box2">
          <img src="../../assets/background2.png" class="bgimg" />
          <div class="title2 text_center">地图</div>
          <div class="map_box">
            <baidu-map :center="center" :zoom="zoom" @ready="handler" :mapStyle="mapStyle" :scroll-wheel-zoom="true" style="width: 90%;height: 100%;margin-top: 100px;"></baidu-map>
          </div>
        </div>
      </div>
      <div class="screenBox_item">
        <div class="box">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">日统计</div>
          <div class="line_chart" style="width:100%;height:100%">
            <linechart :chartdata="days_data" :xAxis="{type: 'category',data:day,axisLine: {lineStyle: {color: '#fff'}}}" :grid="{bottom: 30,left: 50}"></linechart>
          </div>
        </div>
        <div class="box">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">实时交易</div>
          <div class="line_chart" style="width:100%;height:100%">
            <dv-scroll-board :config="trading_data" style="width:95%;height:80%;margin:45px 0 0 12px" />
          </div>
        </div>
        <div class="box" @click="gotoDivisionStatisticst">
          <img src="../../assets/background.png" class="bgimg" />
          <div class="title text_center">分局统计</div>
          <div class="line_chart" style="width:100%;height:100%">
            <linechart :chartdata="branch_data" :xAxis="{type: 'category',data:branch,axisLine: {lineStyle: {color: '#fff'}}}" :grid="{bottom: 30,left: 50}"></linechart>
          </div>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<script>
import piechart from './config/pie_chart.vue'
import linechart from './config/line_chart.vue'
import * as dayDate from './config/dayData'
import custom_map_config from './config/custom_map_config.json'
export default {
  name: "EduIndex",
  components: { piechart, linechart },
  data() {
    return {
      dialogVisible: false,
      content: "加油站",
      mapStyle: {
        styleJson: custom_map_config
      },
      center: { lng: 0, lat: 0 },
      zoom: 3,
      stationsData: [
        { name: "加油站数量", quantity: "5", unit: "个", icon: require("../../assets/station_icon/station.png") },
        { name: "今日营业额", quantity: "5.24", unit: "万元", icon: require("../../assets/station_icon/turnover.png") },
        { name: "今日加油量", quantity: "7.76", unit: "吨", icon: require("../../assets/station_icon/bucket.png") },
        { name: "采集设备数量", quantity: "36", unit: "台", icon: require("../../assets/station_icon/setting.png") },
        { name: "设备在线率", quantity: "97.22", unit: "%", icon: require("../../assets/station_icon/setting.png") },
        { name: "警告数量", quantity: "3", unit: "条", icon: require("../../assets/station_icon/waring.png") }
      ],
      piedata: [
        { value: 587, name: '柴油0#' },
        { value: 243, name: '汽油93#' },
        { value: 130, name: '柴油10#' },
        { value: 40, name: '汽油97#' },
      ],
      years_data: {
        data: [[71, 46, 92, 109, 119, 119, 110, 133, 135, 153, 145, 145], [55, 38, 63, 72, 79, 79, 76, 83, 85, 90, 87, 87]],
        name: ['加油量（吨）', '营业额（万元）'],
      },
      months_data: {
        data: [[71, 46, 92, 109, 119, 119, 110, 133, 135, 153, 145, 145], [55, 38, 63, 72, 79, 79, 76, 83, 85, 90, 87, 87]],
        name: ['加油量（吨）', '营业额（万元）'],
      },
      days_data: {
        data: dayDate.dayDate,
        name: ['加油量（吨）', '营业额（万元）'],
      },
      branch_data: {
        data: [[30, 50, 52, 46], [34, 64, 77, 80]],
        name: ['加油量（吨）', '营业额（万元）'],
      },
      stations_data: { data: [[23, 34, 54, 54, 56], [23, 34, 54, 54, 56]], name: ['加油量（吨）', '营业额（万元）'], },
      trading_data: {
        headerBGC: '#050d39',
        oddRowBGC: '#050d39',
        evenRowBGC: '#050d39',
        header: ['油站', '油枪号', '油品', '单价', '升数', '金额'],
        data: [
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
          ['闵易加油站', '11', '柴油0#', 4.88, 32.79, 160.00],
        ],
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        columnWidth: [80]
      },
      monthsday: [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
      day: [],
      branch: ['清水分局', '和平分局', '涟源分局', '毕集分局'],
      stations: ['亿林石油第二加油站', '化林路加油站', '闵易加油站', '亿林石油第二加油站', '毕集油站'],
      axisLabel: {
        align: 'center',
        margin: 50,
        formatter: function (value) {
          var ret = "";//拼接加\n返回的类目项 
          var maxLength = 7;
          var valLength = value.length;
          var rowN = Math.ceil(valLength / maxLength);
          if (rowN > 1) {
            for (var i = 0; i < rowN; i++) {
              var temp = "";
              var start = i * maxLength;
              var end = start + maxLength;
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        }
      }
    }
  },
  mounted() {
    this.getDay(2022, 1)
    this.setDateStyle()
  },
  computed: {
    years() {
      let arr = []
      for (let i = 2011; i <= 2022; i++) {
        arr.push(i + '年')
      }
      return arr
    },
    month() {
      let arr = []
      for (let i = 1; i <= 12; i++) {
        arr.push(i + '月')
      }
      return arr
    }
  },
  methods: {
    gotoStationsManagement() {
      this.$router.push({ name: '/stationsManagement', path: '/stationsManagement' })
    },
    gotoDivisionStatisticst() {
      this.$router.push({ name: '/divisionStatistics', path: '/divisionStatistics' })
    },
    getDay(year, month) {
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        this.monthsday[2] = 29
      }
      for (let i = 1; i <= this.monthsday[month]; i++) {
        this.day[i - 1] = i + '日'
      }
    },
    setDateStyle() {
      this.trading_data.header = this.trading_data.header.map(node => {
        return `<span style="color:#1abc9c;font-size:10px;">${node}</span>`
      })
      this.trading_data.data = this.trading_data.data.map(item => {
        return item.map(node => {
          return `<span style="font-size:10px;">${node}</span>`
        })
      })
    },
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
};
</script>

<style lang="scss" scoped>
/*功能css */
.header {
  display: flex;
  flex-direction: row;
  height: 16px;
  margin: 3px 0 0 2px;
}
.detail {
  display: flex;
  flex-direction: row;
}
.text_center {
  text-align: center;
  line-height: 30px;
}
.box_center {
  display: flex;
  align-items: center;
}
.bgimg {
  position: absolute;
  height: 100%;
  width: 100%;
}
.title {
  color: #56bce5;
  position: absolute;
  height: 30px;
  width: 110px;
  top: 8px;
  left: 8px;
  font-weight: 800;
}
.title1 {
  color: #56bce5;
  position: absolute;
  height: 30px;
  width: 120px;
  top: 14px;
  left: 8px;
  font-weight: 800;
}
.title2 {
  color: #56bce5;
  position: absolute;
  height: 30px;
  width: 120px;
  top: 8px;
  left: 10px;
  font-weight: 800;
}
.map_box {
  position: relative;
  width: 100%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* DOM CSS*/
.screenstyle {
  background-color: #23272e;
}
.screenBox {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: #050d39;
}
.screenBox_item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 33.33%;
  height: 100%;
  .box {
    position: relative;
    height: 33.33%;
    width: 100%;
  }
  .box1 {
    position: relative;
    height: 45%;
    width: 100%;
  }
  .box2 {
    position: relative;
    height: 55%;
    width: 100%;
  }
}
.detail_card {
  width: 73%;
  height: 80%;
  padding: 20px 0 0 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  .card_item {
    height: 32%;
    width: 29%;
    border: 1px solid #0eddc2;
  }
}
</style>
